<template>
  <div class="box mar-t-10">
    <u-steps
      :current="native"
      size="default"
      label-placement="vertical"
      :align-center="true"
    >
      <u-step title="策略基本信息" icon="me" />
      <u-step title="策略规则" icon="risk" />
      <u-step title="策略成功准则" icon="running" />
      <u-step title="策略执行规则" icon="smile" />
    </u-steps>
  </div>
  <div>
    <!-- <component :is="step1" /> -->
    <step3 />
  </div>
  <div class="btn">
    <u-button @click="back">
      上一步
    </u-button>
    <u-button type="primary" @click="next" class="mider">
      下一步
    </u-button>
    <u-button @click="close">
      取消
    </u-button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import step1 from './step1.vue'
import step3 from './step3.vue'

export default {
  components: {
    // step1,
    step3
    // step1: () => import('./step1.vue')
  },
  setup() {
    const native = ref(0)
    const router = useRouter()
    const next = () => {
      native.value += 1
      if (native.value > 3) {
        native.value = 3
      }
    }
    const close = () => {
      router.push('/polocy/meAtlas')
    }
    const back = () => {
      native.value -= 1
      if (native.value < 0) {
        native.value = 0
      }
      console.log(native.value)
    }

    return {
      native,
      next,
      back,
      close
    }
  }
}
</script>

<style scoped lang="less">
.box {
  background: #fff;
  padding: 20px;
}
.mar-t-10 {
  margin-bottom: 10px;
}
.btn {
  text-align: right;
  margin: 10px 0;
  padding: 20px;
  background: #fff;
  .mider {
    margin: 0 10px;
  }
}
</style>
